<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>a document</title>
<style>
*{margin:0; padding:0;}
div{ float:left; width:422px; height:625px; position:relative;}
#mask{ position:absolute; width:53px; height:78px; background:rgba(204,51,0,0.5); top:0; left:0; display:none;}
#s{ margin:100px 0 0 100px;}
#b{ overflow:hidden; display:none; margin-left:20px; margin-top:100px;}
#b img{ position:absolute; top:0; left:0;}
</style>
<script>
window.onload=function(){
	var oS=document.getElementById('s');
	var oB=document.getElementById('b');
	var oM=document.getElementById('mask');
	var oImg=oB.getElementsByTagName('img')[0];
	oS.onmouseover=function(){
		oM.style.display='block';
		oB.style.display='block';	
	}
	oS.onmousemove=function(ev){
		var oEvent=ev||event;
		var scrollT=document.documentElement.scrollTop||document.body.scrollTop;
		var scrollL=document.documentElement.scrollLeft||document.body.scrollLeft;
		var l=oEvent.clientX-oS.offsetLeft+scrollL-oM.offsetWidth/2;
		if(l<0){
			l=0
		}else if(l>oS.offsetWidth-oM.offsetWidth){
			l=oS.offsetWidth-oM.offsetWidt;
		}
		var t=oEvent.clientY-oS.offsetTop+scrollT-oM.offsetHeight/2;
		if(t<0){
			t=0
		}else if(t>oS.offsetHeight-oM.offsetHeight){
			t=oS.offsetHeight-oM.offsetHeight;
		}
		oM.style.left=l+'px';
		oM.style.top=t+'px';
		oImg.style.left=-l/(oS.offsetWidth-oM.offsetWidth)*(oImg.offsetWidth-oB.offsetWidth)+'px';
		oImg.style.top=-t/(oS.offsetHeight-oM.offsetHeight)*(oImg.offsetHeight-oB.offsetHeight)+'px';
	}
	oS.onmouseout=function(){
		oM.style.display='none';
		oB.style.display='none';	
	}
};
</script>
</head>

<body>
<div id="s">
	<img src="1.jpg" />
    <span id="mask"></span>
</div>
<div id="b">
	<img src="2.jpg" />
</div>
</body>
</html>
